<template>
  <el-dialog :model-value="modelValue" title="批量导入积分" width="460px" :before-close="handleClose" @open="open">
    <div class="uploadExcel">
      <div class="tips">
        点击下载<span @click="download">Excel表格模板</span>
      </div>
      <el-upload ref="uploadRef" class="upload" drag :limit="1" action="" accept=".xlsx,.xls" :show-file-list="true"
        :http-request="upload" :on-change="handleChange">
        <div class="uploadSlot">
          <p>点击或文件拖拽到这里上传</p>
          <div class="uploadSlot-tip">
            *仅支持xlsx格式，请将大小控制在20M以内
          </div>
        </div>
      </el-upload>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" @click="submit" :loading="form.isLoading">
          确认
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import marketingCenterApi from "@/api/marketingCenterApi";
import { UploadRequestOptions,UploadFile,UploadFiles } from "element-plus"
const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false
  },
  id: {
    type: [String, Number],
    default: ''
  }
})

const uploadRef = ref(null)
const form = reactive<any>({
  file: null,
  isLoading: false
})

const upload = (e: UploadRequestOptions) => {
  form.file = e.file;
}

const download = () => {
  const url = './fileTemplate/tokenImport.xlsx'
  let a = document.createElement("a");
  a.setAttribute("href", url);
  a.setAttribute("download", "导入模板.xlsx");
  document.body.appendChild(a);
  a.click();
  document.body.removeChild(a);
}

const emits = defineEmits(['update:modelValue', 'confirm'])
const handleClose = () => {
  uploadRef.value?.clearFiles()
  form.file = null
  form.isLoading = false
  emits('update:modelValue', false)
}

const open = () => {
  nextTick(() => {
    uploadRef.value?.clearFiles()
  })
}

const submit = async () => {
  if (!form.file) {
    return ElMessage.warning('请选择文件')
  }
  form.isLoading = true
  const formData = new FormData()
  formData.append('file', form.file)
  formData.append('currencyId', props.id)
  const res = await marketingCenterApi.currencyImport(formData)
  form.isLoading = false
  if (res.code == 200) {
    emits('confirm', res.payload)
    handleClose()
  }
}

const handleChange=(file: UploadFile, files: UploadFiles)=>{
  if(files.length>1){
    const temFiles = files.slice(-1);
    files.length=0
    files.push(...temFiles)
  }
}

</script>
<style lang="scss" scoped>
.tips {
  font-size: 12px;
  font-weight: 400;
  color: #999999;
  line-height: 17px;
  margin-bottom: 8px;
  padding-left: 5px;

  span {
    color: #6178ff;
    cursor: pointer;
  }
}

.upload {
  width: 412px;
  margin-top: 20px;

  :deep(.el-upload-dragger) {
    width: 100%;
    border: 0;
    padding: 0;
    border-radius: 2px;

    // border-bottom: 1px solid #dae0ff;
  }
}

.uploadSlot {
  width: 100%;
  height: 85px;
  background: url("@/assets/images/_upload_icon.png") center / 100% no-repeat;
  padding-top: 102px;
  text-align: center;

  p {
    font-size: 16px;
    color: #333333;
    line-height: 24px;
    margin-bottom: 4px;
  }

  &-tip {
    font-size: 14px;
    font-weight: 400;
    color: #999999;
    line-height: 22px;
  }
}
</style>